import styled from '@emotion/styled';
import React, { useEffect, useRef, useState } from 'react';
import videojs from 'video.js';
import useSyncState from '../hooks/useSyncState';
import { useTranslation } from 'react-i18next';

import './styles/index.less';

interface VideoCollectionDetailProps {
	data: any;
	userRole: string;
}

const Container = styled.div`
	position: relative;
	margin: 0 14px;
	overflow-x: hidden;
`;

const Title = styled.span`
	display: inline-block;
	font-size: 12px;
	color: #2a2a2a;
	margin-bottom: 20px;
`;

const Video = styled.video`
	width: 313px;
	height: 480px;
	background: #000000;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
`;

const UserRole = styled.span`
	font-size: 12px;
	color: #666666;
	margin-bottom: 6px;
	visibility: ${(props: { userRole: string }) => (props.userRole === 'normal' ? 'hidden' : '')};
	display: inline-block;
    width: 100%;
`;

const VideoCollectionDetail = (props: VideoCollectionDetailProps) => {
	const { t } = useTranslation();
	const { data, userRole } = props;

	const [isShowDruation, setIsShowDruation] = useSyncState<boolean>(false);
	const [playTime, setPalyTime] = useSyncState<number>(0);

	const [playError, setPlayError] = useSyncState<boolean>(false);

	const player = useRef<null | any>(null);

	useEffect(() => {
		player.current = videojs(
			'myvideo',
			{
				controls: true, // 是否显示控制条
				preload: 'auto',

				width: 314,
				height: 480,
				autoplay: false,
				fluid: true, // 自适应宽高
				language: 'zh-CN', // 设置语言
				muted: false, // 是否静音
				controlBar: {
					// 设置控制条组件
					// 设置控制条里面组件的相关属性及显示与否
					currentTimeDisplay: true,
					liveDisplay: true,
					timeDivider: false,
					durationDisplay: true,
					remainingTimeDisplay: false,
					volumePanel: {
						inline: false
					}
				}
			},
			function () {
				console.log('视频可以播放了', this);
			}
		);

		player.current.on('play', function (e: any) {
			setIsShowDruation(true);
			console.log('点击播放', e);
		});
		player.current.on('loadedmetadata', function (e: any) {
			console.log('获取资源长度完成 ', e);
		});
		player.current.on('timeupdate', (e: any) => {
			setPalyTime(player.current.cache_.currentTime);
		});

		return () => {
			player.current.dispose();
			player.current = null;
		};
	}, []);

	useEffect(() => {
		player.current.src({ src: data.url });
		player.current.on('error', (err: any) => {
			console.log(err);
		});

		player.current.error(`${t('prev-video-error')}`, (err: any) => {});
	}, [data]);

	const getDruation = (time: number) => {
		let min = Math.floor((time / 1000 / 60) << 0);
		let sec = Math.floor((time / 1000) % 60);
		let rmin = min < 10 ? '0' + min : min;
		let rsec = sec < 10 ? '0' + sec : sec;
		return rmin + ':' + rsec;
	};

	return (
		<Container>
			{!playError() ? (
				<div className="prev-video-wrapper">
					<UserRole userRole={userRole}>{userRole}</UserRole>
					<Title>{t('short-video-collection-result')}</Title>
					<video id="myvideo" className="video-js vjs-big-play-centered vjs-fluid" controls data-setup="{}" width={'100%'} preload="auto"></video>
					{isShowDruation() ? (
						<p className="time-rema">
							<span>{getDruation(playTime() * 1000)}</span>
							<span>-</span>
							<span>{getDruation(data.time)}</span>
						</p>
					) : null}
				</div>
			) : (
				<div className="error-info">
					<Title>{t('short-video-collection-result')}</Title>
					<p>{t('prev-video-error')}</p>
				</div>
			)}

			{/* <Video id="video-collection" preload="metadata" x5-video-player-type="h5" controls={true} playsInline={true}></Video> */}
		</Container>
	);
};

export default VideoCollectionDetail;
